<template>
  <h1>(toRef,toRefs的使用)</h1>
  <h1>{{persion}}</h1>
  <h2>姓名:{{name}}</h2>
  <h2>年龄:{{age}}</h2>
  <button @click="name+='!'">修改姓名</button>
  <button @click="age++">修改年龄</button>
</template>

<script>
import { reactive, toRef, ref, toRefs } from 'vue'
export default {
  setup () {
    const persion = reactive({
      name: '张三',
      age: 18,
    })
    return {
      persion,
      // ref 是新创建了一个响应式的数据和persion不会有关系
      //   name: ref(persion.name),
      // toRef 是引用 persion,所以和 persion 存在引用关系
      name: toRef(persion, 'name'),
      // toRefs 可以将某一个引用数据类型中的所有属性都变成ref对象,且与原引用数据类型存在引用关系
      ...toRefs(persion)
    }
  }
}
</script>